<div class="redirecturlsearch" ng-controller="Umbraco.Dashboard.RedirectUrlsController as vm">

    <umb-load-indicator ng-if="vm.dashboard.loading"></umb-load-indicator>

    <umb-editor-sub-header>

        <umb-editor-sub-header-content-right>

            <umb-editor-sub-header-section ng-if="vm.dashboard.userIsAdmin === true">

                <button
                    ng-if="vm.dashboard.urlTrackerDisabled === false"
                    type="button"
                    class="umb-era-button umb-button--s"
                    ng-click="vm.disableUrlTracker()">
                    <span><localize key="redirectUrls_disableUrlTracker">Disable URL Tracker</localize></span>
                </button>

                <button
                    ng-if="vm.dashboard.urlTrackerDisabled === true"
                    type="button"
                    class="umb-era-button umb-button--s -green"
                    ng-click="vm.enableUrlTracker()">
                    <span><localize key="redirectUrls_enableUrlTracker">Enable URL Tracker</localize></span>
                </button>

            </umb-editor-sub-header-section>

            <umb-editor-sub-header-section ng-if="vm.dashboard.urlTrackerDisabled === false">

                <form class="form-search -no-margin-bottom pull-right" novalidate>
                    <div class="inner-addon left-addon">
                        <i class="icon icon-search"></i>
                        <input
                            class="form-control search-input"
                            type="text"
                            localize="placeholder"
                            placeholder="@general_typeToSearch"
                            ng-model="vm.dashboard.searchTerm"
                            ng-change="vm.filter()"
                            prevent-enter-submit
                            no-dirty-check>
                    </div>
                </form>

            </umb-editor-sub-header-section>

        </umb-editor-sub-header-content-right>

    </umb-editor-sub-header>

    <div class="umb-table" ng-if="vm.redirectUrls.length > 0 && vm.dashboard.loading === false" ng-class="{'umb-table-inactive': vm.dashboard.urlTrackerDisabled === true}">

        <div class="umb-table-head">
            <div class="umb-table-row">
                <div class="umb-table-cell not-fixed flx-s1 flx-g1 flx-b4"><localize key="redirectUrls_originalUrl">Original URL</localize></div>
                <div class="umb-table-cell flx-s0 flx-g0" style="flex-basis: 20px;"></div>
                <div class="umb-table-cell flx-s1 flx-g1 flx-b6"><localize key="redirectUrls_redirectedTo">Redirected To</localize></div>
            </div>
        </div>

        <div class="umb-table-body">

            <div class="umb-table-row -solid" ng-repeat="redirectUrl in vm.redirectUrls">


                <div class="umb-table-cell not-fixed flx-s1 flx-g1 flx-b4">
                    <a class="umb-table-body__link" href="{{redirectUrl.originalUrl}}" target="_blank" title="{{redirectUrl.originalUrl}}">{{redirectUrl.originalUrl}}</a>
                </div>

                <div class="umb-table-cell flx-s0 flx-g0" style="flex-basis: 20px;">
                    <i class="umb-table-body__icon umb-table-body__fileicon icon-arrow-right" style="font-size: 12px; line-height: 1;"></i>
                </div>

                <div class="umb-table-cell flx-s1 flx-g1 flx-b6 items-center">
                    <div class="flx-s1 flx-g1 flx-b0" style="margin-right: 20px;">
                        <a class="umb-table-body__link" href="{{redirectUrl.destinationUrl}}" target="_blank" title="{{redirectUrl.destinationUrl}}">{{redirectUrl.destinationUrl}}</a>
                    </div>

                    <button type="button" class="umb-era-button umb-button--s -red" ng-click="vm.removeRedirect(redirectUrl)"><localize key="redirectUrls_removeButton">Remove</localize></button>
                </div>

            </div>

        </div>

    </div>

    <umb-empty-state
        ng-if="vm.redirectUrls.length === 0 && vm.dashboard.searchTerm.length === 0 && !vm.dashboard.loading"
        position="center">
        <div><localize key="redirectUrls_noRedirects">No redirects have been made</localize></div>
        <small class="faded"><localize key="redirectUrls_noRedirectsDescription">When a published page gets renamed or moved a redirect will automatically be made to the new page</localize></small>
    </umb-empty-state>

    <umb-empty-state
        ng-if="vm.redirectUrls.length === 0 && vm.dashboard.searchTerm.length > 0 && !vm.dashboard.loading"
        position="center">
        <localize key="general_searchNoResult"></localize>
    </umb-empty-state>

    <div class="flex justify-center items-center">
        <umb-pagination
            ng-if="vm.pagination.totalPages > 1 && !vm.dashboard.loading"
            page-number="vm.pagination.pageNumber"
            total-pages="vm.pagination.totalPages"
            on-next="vm.goToPage"
            on-prev="vm.goToPage"
            on-go-to-page="vm.goToPage">
        </umb-pagination>
    </div>

</div>
